<template>
  <ga-comment>
    <template #author>
      <router-link v-if="to" :to="to" class="router-link">
        {{ label || '-' }}
      </router-link>
      <span v-else class="comment-label" @click="$emit('click')"> {{ label || '-' }}</span>
    </template>
    <template #avatar> </template>
    <template #content>
      <span class="comment-desc">
        {{ desc || '-' }}
      </span>
    </template>
  </ga-comment>
</template>
<script setup>
  import { defineEmits, defineProps } from 'vue'
  defineEmits(['click'])
  defineProps({
    label: String,
    desc: String,
    to: String
  })
</script>
<style scoped lang="scss">
  .comment-label, .router-link {
    cursor: pointer;
    color: #0f5ef7;
    &:hover {
      text-decoration: underline;
    }
  }
  .comment-desc {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(44, 64, 104, 0.6);
  }

  :deep(.garco-comment-avatar) {
    margin-right: 0px;
  }
</style>
